<template>
	<el-dialog
		:title="title"
		:center="true"
		width="1000px"
		:append-to-body="true"
		:close-on-click-modal="false"
		:visible.sync="isShow"
	>
		<div class="btn-box">
			<el-button type="primary" :disabled="!selectItems.length" @click="onDelete(selectItems)">删除</el-button>
		</div>
		<el-table
			:max-height="400"
			row-key="knowledgeId"
			:stripe="true"
			:data="value"
			@select="selectionChange"
			@select-all="selectionChange"
		>
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column
				type="index"
				label="序号"
				width="120"
				align="center"
				:index="(index) => index + 1"
			/>
			<el-table-column prop="knowledgeName" label="知识点名称" />
			<el-table-column prop="date" label="星级" width="170">
				<template #default="{ row }">
					<div class="star-box">
						<img
							v-for="i in row.knowledgeStarLevel"
							:key="i"
							class="img"
							src="@rc/assets/images/star-ico.png"
							alt="星星"
						>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="110px" align="center">
				<template #default="{ row }">
					<el-button type="text" @click="onDelete([row])">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="hint-box">{{ hintTxt }}</div>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			//是否显示弹窗
			visibly: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "已关联知识点"
			},
			// 展示的数据列表，支持v-model,[{knowledgeId:知识点标识,knowledgeName:知识点名称,level:星级}]
			value: {
				type: Array,
				default: () => []
			},
			upperDeal: {
				//是否上级处理删除逻辑
				type: Boolean,
				default: false
			},
			deleteConfirm: {//是否弹窗确认提示
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isShow: this.visibly, // 内部的是否显示弹窗
				selectItems: [] // 当前选中的选项列表
			};
		},
		computed: {
			hintTxt() {
				let str = "共关联：";
				let one = 0;
				let two = 0;
				let three = 0;
				let four = 0;
				let five = 0;
				this.value.forEach((i) => {
					switch (i.knowledgeStarLevel) {
						case 1:
							one += 1;
							break;
						case 2:
							two += 1;
							break;
						case 3:
							three += 1;
							break;
						case 4:
							four += 1;
							break;
						case 5:
							five += 1;
							break;
					}
				});
				if (five) {
					str += "五星" + five + "个，";
				}
				if (four) {
					str += "四星" + four + "个，";
				}
				if (three) {
					str += "三星" + three + "个，";
				}
				if (two) {
					str += "二星" + two + "个，";
				}
				if (one) {
					str += "一星" + one + "个，";
				}
				if (five || four || three || two || one) {
					return str.slice(0, str.length - 1);
				}
				return str;
			}
		},
		watch: {
			// 内部和外部的变量双向绑定
			isShow(val) {
				this.$emit("update:visibly", val);
			},
			visibly(val) {
				this.isShow = val;
			},
			value() {
				//清除选中内容
				this.selectItems = [];
			}
		},
		methods: {
			selectionChange(list) {
				this.selectItems = list;
			},
			// 点击删除
			onDelete(arr) {
				if (this.upperDeal || this.deleteConfirm) {
					this.$confirm("确定要删除知识点吗？", "删除提示", {
						type: "warning"
					}).then(() => {
						if (this.upperDeal) {
							this.$emit("delete", arr);
						} else {
							const resultArr = this.value.filter((i1) => {
								return !arr.some((i2) => i2.knowledgeId === i1.knowledgeId);
							});
							this.$message.success("知识点删除成功");
							this.$emit("input", resultArr);
						}
					});
				} else {
					const resultArr = this.value.filter((i1) => {
						return !arr.some((i2) => i2.knowledgeId === i1.knowledgeId);
					});
					this.$message.success("知识点删除成功");
					this.$emit("input", resultArr);
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.btn-box {
		margin-bottom: 20px;
		text-align: right;
	}
	.star-box {
		display: flex;
		align-items: center;

		.img {
			margin: 0 3px;
		}
	}

	.hint-box {
		margin-top: 20px;
		font-size: 14px;
	}
</style>
